<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row :gutter="48">
          <a-col :span="12">
            <a-form-model-item label="项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectId">
              <select-project-input
                v-model="model.projectId"
                placeholder="请输入选择项目"
                :signUnit="payeeUnit"
                projectStatus="2"
                :disabled="formDisabled"
                @input="selectProject" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="项目编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectCode">
              <a-input disabled v-model="model.projectCode" placeholder="请输入项目编号" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="业绩归属年度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectYear">
              <j-dict-select-tag
                type="list"
                v-model="model.projectYear"
                dictCode="yjgsnd"
                placeholder="请选择业绩归属年度"
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="项目承接人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectUndertaker">
              <select-user-by-dep
                :multi="false"
                v-model="model.projectUndertaker"
                disabled></select-user-by-dep>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="12">
            <a-form-model-item label="费用所属年度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="teamYear">
              <j-dict-select-tag
                    :disabled="formDisabled"
                    type="list"
                    v-model="model.teamYear"
                    dictCode="tdnd_type"
                    placeholder="请选择费用所属年度"
                  />
            </a-form-model-item>
          </a-col>
          disabled
          -->
          <a-col :span="12">
            <a-form-model-item label="经营团队" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="busiTeamId">
              <select-team-input
                disabled
                v-model="model.busiTeamId"
                :tdlx="3" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="项目合同" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contractNo">
              <select-contract-manager-input
                showName="1"
                :muitFlag="true"
                :disabled="formDisabled"
                @change="selectContractHandle"
                ref="contract"
                :status="'2,3,7'"
                :projectId="model.projectId"
                htlx="1"
                v-model="model.contractNo"
                @back="getContractInfo"/>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="12">
            <a-form-model-item label="项目进度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectPlan">
              <j-dict-select-tag type="list" :disabled="formDisabled" placeholder="请选择项目进度" v-model="model.projectPlan" dictCode="erp_progress_contract_node,node_name,id" disabled />
            </a-form-model-item>
          </a-col> -->
          <a-col :span="12">
            <a-form-model-item label="合同款项" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contractMoneyItemId">
              <select-checkoutlist-input :disabled="formDisabled" v-model="model.contractMoneyItemId" :isFinance="true" :contractNo="model.contractNo" @back="getCheckoutInfo"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="应收款（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="receivables">
              <a-input-number
                :max="99999999"
                @change="inputAmount"
                :min="0"
                v-model="model.receivables"
                placeholder="请输入应收款"
                style="width: 100%"
                disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="已收款（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="collectedMoney">
              <a-input-number
                :max="99999999"
                @change="inputAmount"
                :min="0"
                v-model="model.collectedMoney"
                placeholder="请输入已收款"
                style="width: 100%"
                disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="累计扣款（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="totalDeductMoney">
              <a-input-number
                :max="99999999"
                @change="inputAmount"
                :min="0"
                v-model="model.totalDeductMoney"
                placeholder="请输入累计扣款"
                style="width: 100%"
                disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="本次收款（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="amount">
              <a-input-number
                :disabled="formDisabled"
                :max="model.receivables"
                @change="inputAmount"
                :min="0"
                v-model="model.amount"
                placeholder="请输入本次收款"
                style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="本次扣款（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deductMoney">
              <a-input-number
                :disabled="formDisabled"
                :max="model.receivables"
                @change="inputAmount"
                :min="0"
                v-model="model.deductMoney"
                placeholder="请输入本次扣款"
                style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="未回款（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="unreturnedMoney">
              <a-input-number
                :max="99999999"
                v-model="model.unreturnedMoney"
                placeholder="请输入未回款"
                style="width: 100%"
                disabled/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
  import SelectContractManagerInput from '@/views/scy/components/SelectContractManagerInput'
  import SelectProjectInput from '@/views/scy/components/SelectProjectInput'
  import SelectTeamInput from '@/views/scy/components/SelectTeamInput'
  import SelectPersonInput from '@/views/scy/components/SelectPersonInput'
  import SelectCheckoutlistInput from '@/views/scy/components/SelectCheckoutlistInput'
  import SelectNodelistInput from '@/views/scy/components/SelectNodelistInput'
  import SelectUserByDep from '@/views/scy/components/SelectUserByDep'

  export default {
    name: 'ErpFinanceCollectMoneyItemForm',
    components: {
      SelectContractManagerInput,
      SelectProjectInput,
      SelectTeamInput,
      SelectPersonInput,
      SelectCheckoutlistInput,
      SelectNodelistInput,
      SelectUserByDep
    },
    props: {
      // 表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      payeeUnit: {
        type: String,
        default: '',
        required: false
      }
    },
    data () {
      return {
        model: {
          projectId: ''
        },
        labelCol: {
        },
        projectType: '2',
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 }
        },
        confirmLoading: false,
        validatorRules: {
          projectId: [
            { required: true, message: '请输入项目名称!' }
          ],
          contractNo: [
            { required: true, message: '请输入项目合同!' }
          ],
          projectPlan: [
            { required: true, message: '请输入项目进度!' }
          ],
          contractMoneyItemId: [
            { required: true, message: '请选择合同款项!' }
          ],
          amount: [
            { required: true, pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '请输入本次收款金额!' }
          ],
          deductMoney: [
            { required: true, pattern: /^(([1-9][0-9]*|0)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '请输入本次扣款金额!' }
          ],
          unreturnedMoney: [
            { required: false, pattern: /^(([1-9][0-9]*|0)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '未回款金额不正确!' }
          ]
        },
        url: {
          add: '/api/erp/finance/collectMoney/erpFinanceCollectMoneyItem/add',
          edit: '/api/erp/finance/collectMoney/erpFinanceCollectMoneyItem/edit',
          queryById: '/api/erp/finance/collectMoney/erpFinanceCollectMoneyItem/queryById'
        }
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      }
    },
    created () {
       // 备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      selectContractHandle() {
        this.model.contractMoneyItemId = null;
        this.$set(this.model, 'receivables', null);
        this.$set(this.model, 'collectedMoney', null);
        this.$set(this.model, 'totalDeductMoney', null);
        this.$set(this.model, 'amount', '');
        this.$set(this.model, 'deductMoney', '');
        this.$set(this.model, 'unreturnedMoney', '');
      },
      // 输入金额
      inputAmount(arg) {
          let unreturnedMoney = (this.model.receivables - this.model.collectedMoney - this.model.amount - this.model.deductMoney - this.model.totalDeductMoney).toFixed(2);
          if ((!!this.model.receivables || this.model.receivables == 0) && (!!this.model.collectedMoney || this.model.collectedMoney == 0) && (!!this.model.amount || this.model.amount == 0) &&
          (!!this.model.totalDeductMoney || this.model.totalDeductMoney == 0) && (!!this.model.deductMoney || this.model.deductMoney == 0)) {
            console.log('unreturnedMoney', unreturnedMoney)
            // 当unreturnedMoney值为 - 0.00时要显示为0.00
            if (unreturnedMoney == -0.00) {
              unreturnedMoney = 0.00;
            }
              this.$set(this.model, 'unreturnedMoney', unreturnedMoney);
          }
      },
      // 获取合同信息
      getContractInfo(data) {
        if (data) {
          this.$set(this.model, 'projectPlan', data[0].contractNodeId);
        }
      },
      // 获取项目信息
      selectProject(data) {
        if (data) {
          if (data && data.choseObj && data.choseObj.length) {
            this.model.projectUndertaker = data.choseObj[0].undertaker;
            this.model.projectYear = data.choseObj[0].year;
            this.model.projectCode = data.choseObj[0].finalNo;
            this.model.busiTeamId = data.choseObj[0].teamName;
          } else {
            this.model.projectUndertaker = null;
            this.model.projectYear = null;
            this.model.projectCode = null;
            this.model.busiTeamId = null;
          }
          this.$set(this.model, 'projectPlan', null);
          this.$set(this.model, 'contractNo', null);
          this.$set(this.model, 'contractMoneyItemId', null);
          this.$set(this.model, 'collectedMoney', 0);
          this.$set(this.model, 'receivables', 0);
          this.$set(this.model, 'totalDeductMoney', 0);
          this.$set(this.model, 'amount', '');
          this.$set(this.model, 'deductMoney', '');
          this.$set(this.model, 'unreturnedMoney', '');
          // if(data.cutStatus!="2"){
          //   this.$message.error('请选择立项项目！');
          //   this.$set(this.model,'projectId',null);
          //   this.$set(this.model,'projectUndertaker','')
          //   this.$set(this.model,'teamYear',null)
          //   this.$set(this.model,"busiTeamId",'');
          //   return ;
          // }else{
          //   this.model.projectUndertaker=data.choseObj[0].undertaker;
          //   this.model.teamYear=data.choseObj[0].year;
          //   this.model.busiTeamId=data.choseObj[0].teamName;
          // }
        }
      },
      getCheckoutInfo(data) {
        if (data) {
          this.$set(this.model, 'receivables', data[0].paymentMoney);
          this.$set(this.model, 'collectedMoney', data[0].realCollectionPaymentMoney);
          this.$set(this.model, 'totalDeductMoney', data[0].deductMoney);
          this.$set(this.model, 'amount', '');
          this.$set(this.model, 'deductMoney', '');
          this.$set(this.model, 'unreturnedMoney', '');
        }
      },
      getNodeInfo() {
        console.log(this.model);
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.$refs['form'].clearValidate();
        Object.assign(this.$data, this.$options.data())
        // this.$refs.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            if (!this.model.id) {
              this.model.id = parseInt(Math.random() * 1000000000000);
            }
            this.$emit('ok', this.model);
            // that.confirmLoading = true;
            // let httpurl = '';
            // let method = '';
            // if(!this.model.id){
            //   httpurl+=this.url.add;
            //   method = 'post';
            // }else{
            //   httpurl+=this.url.edit;
            //    method = 'put';
            // }
            // httpAction(httpurl,this.model,method).then((res)=>{
            //   if(res.success){
            //     that.$message.success(res.message);
            //     that.$emit('ok');
            //   }else{
            //     that.$message.warning(res.message);
            //   }
            // }).finally(() => {
            //   that.confirmLoading = false;
            // })
          }
        })
      }
    }
  }
</script>
